<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 15:35:39
-->
<template>
  <div class="contents" @click.stop="otherclick">
    <div class="mapwrap">
      <ItemWrap v-if="showData" :style="{ left: offsetX, top: offsetY }" style="height: 305px; width: 620px"
        class="dialog" :title="mapTitle" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData = false;">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <MapData :type="positionName" />
      </ItemWrap>
    </div>
    <!-- 网货页面 -->
    <div class="contents_left animate__animated animate__fadeInLeft" style="animation-duration: 1s; ">
      <div class="contets_left_left">
        <ItemInternet class="content_lr-item" title="运费总额" style="width:542px;height: 242px" :type="'leftboxbg'">
          <LeftLeftTop @chartClick="chartClick" />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="货量规模" style="width:542px;height: 242px" :type="'leftboxbg'">
          <LeftLeftCenter @chartClick="chartClick" />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="发货品类占比" style="width:542px;height: 242px" :type="'leftboxbg'">
          <LeftLeftBottom />
        </ItemInternet>
      </div>
      <div class="contets_left_right">
        <ItemInternet class="content_lr-item" :title="mapLeftTopTitle" style="width:542px;height: 242px"
          :type="'leftboxbg'">
          <LeftRightTop />
        </ItemInternet>
        <ItemInternet class="content_lr-item" :title="mapLeftCenterTitle" style="width:542px;height: 242px"
          :type="'leftboxbg'">
          <LeftRightCenter />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="线路货量排名" style="width:542px;height: 242px" :type="'leftboxbg'">
          <LeftRightBottom />
        </ItemInternet>
      </div>
    </div>
    <div class="contents_center animate__animated animate__fadeInUp" style="animation-duration: .8s;">
      <div class="contents_center_top">
        <ItemInternet class="content_lr-item" title="运费总额" style="width: 587px;height: 262px;margin-left: 30px;"
          :type="'centertopbox'">
          <CenterTopLeft @chartClick="chartClick" />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="货量趋势" style="width: 587px;height: 262px" :type="'centertopbox'">
          <CenterTopCenter @chartClick="chartClick" />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="发货品类" style="width: 587px;height: 262px;margin-right: 30px;"
          :type="'centertopbox'">
          <CenterTopRight />
        </ItemInternet>
      </div>
      <div class="contents_center_bottom">
        <div class="contents_center_bottom_left">
          <ItemInternet class="content_lr-item" title="运费总额" style="width:412px;height: 235px;margin-left: 30px;"
            :type="'centerbottombox'">
            <CenterBottomLeftLeft @chartClick="chartClick" />
          </ItemInternet>
          <ItemInternet class="content_lr-item" title="货主分布" style="width:412px;height: 235px;margin-right: 30px;"
            :type="'centerbottombox'">
            <CenterBottomLeftRight />
          </ItemInternet>
        </div>
        <div class="contents_center_bottom_right">
          <ItemInternet class="content_lr-item" title="发货量排名" style="width:412px;height: 235px;margin-left: 30px;"
            :type="'centerbottombox'">
            <CenterBottomRightLeft />
          </ItemInternet>
          <ItemInternet class="content_lr-item" title="货主发货品类" style="width:412px;height: 235px;margin-right: 30px;"
            :type="'centerbottombox'">
            <CenterBottomRightRight />
          </ItemInternet>
        </div>
      </div>

    </div>
    <div class="contents_right animate__animated animate__fadeInRight" style="animation-duration: 1s;">
      <div class="contets_right_left">
        <ItemInternet class="content_lr-item" title="运费总额" style="width:542px;height: 242px" :type="'leftboxbg'">
          <RightLeftTop @chartClick="chartClick" />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="货量规模" style="width:542px;height: 242px" :type="'leftboxbg'">
          <RightLeftCenter @chartClick="chartClick" />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="发货品类" style="width:542px;height: 242px" :type="'leftboxbg'">
          <RightLeftBottom />
        </ItemInternet>
      </div>
      <div class="contets_right_right">
        <ItemInternet class="content_lr-item" :title="mapRightTopTitle" style="width:542px;height: 242px"
          :type="'leftboxbg'">
          <RightRightTop />
        </ItemInternet>
        <ItemInternet class="content_lr-item" :title="mapRightCenterTitle" style="width:542px;height: 242px"
          :type="'leftboxbg'">
          <RightRightCenter />
        </ItemInternet>
        <ItemInternet class="content_lr-item" title="线路货量排名" style="width:542px;height: 242px" :type="'leftboxbg'">
          <RightRightBottom />
        </ItemInternet>
      </div>
    </div>

  </div>
</template>

<script>
import LeftLeftTop from './LeftView/left-left-top.vue';//'./LeftView/left-left-top.vue';
import LeftLeftCenter from './LeftView/left-left-center.vue';
import LeftLeftBottom from './LeftView/left-left-bottom.vue';

import LeftRightTop from './LeftView/left-right-top.vue';
import LeftRightCenter from './LeftView/left-right-center.vue';
import LeftRightBottom from './LeftView/left-right-bottom.vue';

import CenterTopLeft from './CenterView/center-top-left.vue';
import CenterTopCenter from './CenterView/center-top-center.vue';
import CenterTopRight from './CenterView/center-top-right.vue';

import CenterBottomLeftLeft from './CenterView/bottom-left-left.vue';
import CenterBottomLeftRight from './CenterView/bottom-left-right.vue';
import CenterBottomRightLeft from './CenterView/bottom-right-left.vue';
import CenterBottomRightRight from './CenterView/bottom-right-right.vue';

import RightLeftTop from './RightView/right-left-top.vue';
import RightLeftCenter from './RightView/right-left-center.vue';
import RightLeftBottom from './RightView/right-left-bottom.vue';
import RightRightTop from './RightView/right-right-top.vue';
import RightRightCenter from './RightView/right-right-center.vue';
import RightRightBottom from './RightView/right-right-bottom.vue';

import MapData from './modal/map-data.vue';

export default {
  components: {
    LeftLeftTop,
    LeftLeftCenter,
    LeftLeftBottom,
    LeftRightTop,
    LeftRightCenter,
    LeftRightBottom,

    CenterTopLeft,
    CenterTopCenter,
    CenterTopRight,

    CenterBottomLeftLeft,
    CenterBottomLeftRight,
    CenterBottomRightLeft,
    CenterBottomRightRight,

    RightLeftTop,
    RightLeftCenter,
    RightLeftBottom,
    RightRightTop,
    RightRightCenter,
    RightRightBottom,
    MapData,
  },
  name: 'InternetMain',
  data() {
    return {
      offsetX: 0,
      offsetY: 0,
      showData: false,
      isMapClick: false,
      mapLeftTopTitle: '2024年运费总额',
      mapLeftCenterTitle: '2020年货量',
      mapRightTopTitle: '2020年运费总额',
      mapRightCenterTitle: '2020年货量趋势',
      positionName: '',
    };
  },
  methods: {
    chartClick(params, title, positionName) {
      console.log('点击的数据:', params);
      this.isMapClick = false;
      const { name, event } = params;
      this.mapTitle = `${name === '最大值' ? '2023' + title : name + title
        // name + title
        }`;

      this.positionName = '';
      switch (positionName) {
        case 'LeftLeftTop':
          this.mapLeftTopTitle = `${params.name}年运费总额变化趋势`;
          break;
        case 'LeftLeftCenter':
          this.mapLeftCenterTitle = `${params.name}年货量变化趋势`;
          break;
        case 'CenterTopLeft':
          this.isMapClick = true;
          this.mapTitle = `${name === '最大值' ? '2022' + title : name + title
            }`;
          this.offsetX = event.offsetX + 840 + 'px';
          this.offsetY = event.offsetY + 170 + 'px';
          this.positionName = positionName;
          this.showData = true;
          break;
        case 'CenterTopCenter':
          this.isMapClick = true;
          this.mapTitle = `${name === '最大值' ? '2023' + title : name + title
            }`;
          this.offsetX = event.offsetX + 1510 + 'px';
          console.log(this.offsetX)
          this.offsetY = event.offsetY + 170 + 'px';
          this.positionName = positionName;
          this.showData = true;
          break;
        case 'CenterBottomLeftLeft':
          this.isMapClick = true;
          this.mapTitle = `${name === '最小值' ? '2022' + title : name + title
            }`;
          this.offsetX = event.offsetX + 840 + 'px';
          console.log(this.offsetX)
          this.offsetY = event.offsetY + 470 + 'px';
          this.showData = true;
          break;
        case 'RightLeftTop':
          this.mapRightTopTitle = `${params.name}年运费总额变化趋势`;
          break;
        case 'RightLeftCenter':
          this.mapRightCenterTitle = `${params.name}年货量变化趋势`;
          break;

        default:
          break;
      }

    },

    otherclick() {
      if (!this.isMapClick) {
        this.showData = false;
      }
      this.isMapClick = false;
    },
  }
};
</script>

<style lang="scss" scoped>
@import '~animate.css/animate.css';

.page-warp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  // border: 1px solid red;

  // background: url('../../assets/img/bg2.png') no-repeat center;
  background: url('../../assets/img/launch/bg6.png') no-repeat center;
  background-position: center center;
  background-size: 100% 100%;
}
</style>
<style lang="scss" scoped>
.contents {
  // position: relative;
  // top: 0;
  padding-left: 42px;
  padding-right: 42px;
  width: calc(100% - 84px);


  .mapwrap {
    margin-top: -20px;
    margin-bottom: -50px;
    height: 580px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    // border: 1px solid red;

    .close {
      position: absolute;
      right: 15px;
      top: 10px;
      cursor: pointer;
    }

    .dialog {
      width: 400px;
      height: 200px;
      position: absolute;
      z-index: 999;
    }
  }

  .contents_left {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 1216px;
    height: 926px;
    background: url('../../assets/img/launch/internet/leftbg.png') no-repeat top center;
    background-size: 1216px 926px;

    .contets_left_left {
      margin-left: 40px;
    }

    .contets_left_right {
      margin-right: 40px;
    }

    .content_lr-item {
      margin-top: 35px;
    }
  }

  .contents_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 1936px;
    height: 800px;
    margin-top: 35px;

    .contents_center_top {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 1936px;
      height: 397px;
      // padding-top: 75px;
      background: url('../../assets/img/launch/internet/centertopbg.png') no-repeat top left;
      background-size: 1936px 397px;

      .content_lr-item {
        margin-top: 87px;
      }
    }

    .contents_center_bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 30px;

      .content_lr-item {
        margin-top: 87px;
      }

      .contents_center_bottom_left {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 956px;
        height: 369px;
        // padding-top: 87px;
        background: url('../../assets/img/launch/internet/centerleftbg.png') no-repeat top center;
        background-size: 956px 369px;
      }

      .contents_center_bottom_right {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 956px;
        height: 369px;
        // padding-top: 87px;
        background: url('../../assets/img/launch/internet/centerrightbg.png') no-repeat top center;
        background-size: 956px 369px;
      }
    }
  }

  .contents_right {
    width: 1216px;
    height: 926px;
    background: url('../../assets/img/launch/internet/rightbg.png') no-repeat top center;
    background-size: 1216px 926px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .contets_right_left {
      margin-left: 40px;
    }

    .contets_right_right {
      margin-right: 40px;
    }

    .content_lr-item {
      margin-top: 35px;
    }
  }
}
</style>